<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保卫基础信息数据库</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../assets/icons/iconfont.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <!-- 顶栏导航 begin -->
    <div class="layui-header">
        <div class="layui-logo">
            <img src="../images/logo.png" class="x-logo">
            <img src="../images/title.png" class="x-top-title">
        </div>
        <div class="layui-layout-right">
            <ul class="layui-nav x-top-nav">
                <li class="layui-nav-item active">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            首页
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-qbyp.png">
                            情报研判系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-xxcj.png">
                            信息采集系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-xsaj.png">
                            刑事案件系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-ywgl.png">
                            运维管理系统
                        </div>
                    </a></li>
            </ul>
            <ul class="x-nav-user">
                <li class="layui-nav-item">
                    <dl class="x-user-info">
                        <dd class="x-user-photo">
                            <img src="../images/user.png">
                        </dd>
                        <dd class="x-user-text-box">
                            <span class="x-user-name">系统管理员：王要得</span>
                            <span class="x-user-score">积分：279</span>
                        </dd>
                        <dd class="x-user-logout">
                            <img class="nav-logout-icon" src="../images/nav/nav-logout.png">
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶栏导航 end -->

    <!-- 侧栏菜单 begin-->
    <div class="layui-side">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="sideNav" lay-shrink="all">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:void(0);">
                        <i class="iconfont icon-user"></i>
                        数据统计
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a lay-id="0" href="javascript:void(0);">首页(6487)</a></dd>
                        <dd><a lay-id="1" data-url="iframe/statistical.html" href="javascript:void(0);">统计页(0)</a></dd>
                        <dd><a lay-id="2" data-url="iframe/list.html" href="javascript:void(0);">列表页(644880)</a></dd>
                        <dd><a lay-id="3" data-url="iframe/archive.html" href="javascript:void(0);">档案页</a></dd>
                        <dd><a lay-id="4" data-url="iframe/user-index.html" href="javascript:void(0);">个人中心首页</a></dd>
                        <dd><a lay-id="5" data-url="iframe/operate-index.html" href="javascript:void(0);">运营管理首页</a></dd>
                        <dd><a lay-id="6" data-url="iframe/form/case-entry.html" href="javascript:void(0);">案件录入</a></dd>
                        <dd><a lay-id="7" data-url="iframe/form/case-entry-two.html" href="javascript:void(0);">案件录入2</a></dd>
                        <dd><a lay-id="8" data-url="iframe/form/suicideCase.html" href="javascript:void(0);">自杀问题录入</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:void(0);">
                        <i class="iconfont icon-car"></i>
                        车辆信息
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a lay-id="21" data-url="iframe/statistical.html" href="javascript:void(0);">统计页2(0)</a>
                        </dd>
                        <dd><a lay-id="22" data-url="iframe/list.html" href="javascript:void(0);">列表页22(644880)</a></dd>
                        <dd><a lay-id="23" data-url="iframe/archive.html" href="javascript:void(0);">档案页22</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 侧栏菜单 end-->

    <!-- 主体内容 begin -->
    <div class="layui-body layui-body-panel">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-filter="tabPage" lay-allowClose="true">
            <ul class="layui-tab-title" id="tabPage">
                <li class="layui-this ban-close" lay-id="0">首页</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">首页123</div>
            </div>
        </div>
    </div>
    <!-- 主体内容 end -->

    <!-- 底栏 begin -->
    <div class="layui-footer layui-footer-full footer-left">
        <!-- 底部固定区域 -->
        主程序版本号: V1.0.0.1
    </div>
    <!-- 底栏 end -->
</div>

<script src="../../lib/layui/layui.all.js"></script>
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script>
    (function () {
        var element = layui.element
        var currentShowTabpage = '0' // 当前显示页签

        var _fn = {
            // 点击左侧菜单执行
            selectNav: function (item) {
                var _tabTitle = item[0].innerText  // tab标题
                    , _layId = $(item[0]).attr('lay-id')  // tab lay-id  唯一
                    , _tabUrl = item[0].dataset.url || '' // tab 内嵌网页地址
                    , _currentTabList = this.getTabList() // 当选tab 标签集合
                if (!_layId) return false
                // 判断当前页签是否已经新建过
                if ($.inArray(_layId, _currentTabList) < 0) {
                    // 页签第一次打开 新建页签
                    this.addTabPage(_tabTitle, _tabUrl, _layId)
                } else if (currentShowTabpage !== _layId) {
                    // 页签 再次打开 直接选中到当前页签
                    this.switchTabPage(_layId)
                }
            },
            // 页面选项卡变化执行
            tabPageChange: function (data) {
                // 缓存当前选中tab lay-id
                currentShowTabpage = this.getTabList()[data.index]
            },
            /**
             * 页面选项卡新增
             * @param Ltitle 选项卡显示标题
             * @param url 选项内容填充iframe url
             * @param Lid 内容lay-id
             */
            addTabPage: function (Ltitle, url, Lid) {
                element.tabAdd('tabPage', {
                    title: Ltitle
                    , content: '<iframe src="' + url + '"></iframe>'
                    , id: Lid
                });
                this.switchTabPage(Lid)
            },
            /**
             *  切换页面选项卡操作
             * @param id 需要切换到页面的 lay-id
             */
            switchTabPage: function (id) {
                if (id) {
                    element.tabChange('tabPage', id);
                }
            },
            /**
             *  获取当前选项卡集合
             * @returns {Array} 选项卡页面 lay-id  集合
             */
            getTabList: function () {
                var _result = [],
                    _tabListDom = $('#tabPage').children('li')
                for (var i = 0; i < _tabListDom.length; i++) {
                    _result.push($(_tabListDom[i]).attr('lay-id'))
                }
                return _result
            }
        }

        // 左侧菜单选择监控
        element.on('nav(sideNav)', function (item) {
            _fn.selectNav(item)
        })
        // tabPage 切换监控
        element.on('tab(tabPage)', function (data) {
            _fn.tabPageChange(data)
        })
    })();
</script>
</body>
</html>